<template>
  <div class="list">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="(item,index) in pages" :key="index">
        <router-link tag="div" class="tab-item" :to="item.path">
          <span class="tab-link">{{item.meta.title}}</span>
        </router-link>
      </li>

    </ul>

    <div class="functionList" v-if="preINV">
      <!-- <h3>Native To Js Function List</h3>
      <p>1. native返回支付结果给js</p>
      <pre>
        window.payResult = (result,msg)=>{
          //result boolean (返回支付结果)
          //msg string (返回结果信息)
        }
      </pre> -->
      <h3>Js To Native Function List</h3>
      <!-- <p>1.获取手机相关信息</p> -->
      <pre>
        <!-- getPhoneVleus() -->
      </pre>
    </div>
  </div>
</template>

<script>
  import Router from '@/router'

  export default {
    name: 'list',
    data () {
      return {
        msg: 'h5主页面',
        pages: [],
        preINV: true
      }
    },
    mounted() {
      this.list();
      let apiRoot = process.env.VUE_APP_API;
      if(apiRoot.indexOf('d-api')>=0)
      {
        this.preINV = true;
      }
    },
    methods: {
      list() {
        for (let v in Router.options.routes) {
          if(v>1){
            // console.log(Router.options.routes)
            this.pages.push(Router.options.routes[v])
          }
        }
        return this.pages
      }
    }
  }
</script>

<style scoped >
  body{ font-size: 14px;}
  a,div{ font-size: 14px;}
  pre{ font-size: 12px;}
  h1, h2 {
    font-size: 14px;
    text-align: center;
    padding: 0.5rem;
  }
  .functionList{ padding: 0.2rem; border-top: 5px solid #eee;text-align:left;}
  h3{
    font-size: 14px;
    background: #eee;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.2rem;
  }
  p{ padding: 0 0.2rem;}
  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    margin: 10px;
    font-size: 12px;
    text-align: center;
  }

  a {
    color: #3c3c3c;
  }
  .list{
    width:100%;
    height:100%;
  }
  .tab-item{ border: 1px solid #eee; padding: 5px 0;}
</style>